<template>
  <div class="container">
    <Breadcrumb v-if="breadcrumb" />
    <a-card
      :class="props.subPage ? 'page-card' : 'general-card'"
      :title="props.subPage ? undefined : title"
    >
      <template v-if="props.subPage && props.back" #title>
        <a-page-header
          class="page-header"
          :title="title"
          @back="router.back()"
        />
      </template>
      <slot></slot>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { PropType } from 'vue';

  const route = useRoute();
  const router = useRouter();
  const props = defineProps({
    title: {
      type: [Boolean, String] as PropType<boolean | string>,
      default: () => true,
    },
    subPage: Boolean,
    breadcrumb: {
      type: Boolean,
      default: true,
    },
    back: {
      type: Boolean,
      default: true,
    },
  });

  const title = computed(() => {
    if (typeof props.title === 'boolean') {
      return props.title ? (route.meta.title as string) : undefined;
    }
    return props.title;
  });
</script>
